<template>
  <div>
    <Echart
        id="LeftDown5Chart"
        ref="LeftDown5ChartRef"
        :options="options"
    ></Echart>
  </div>
</template>

<script>
import Echart from '@/common/echart';

export default {
  data() {
    return {
      options: {},
    };
  },
  components: {
    Echart
  },
  props: {
    cdata: {
      type: Array,
      default: () => [],
    }
  },
  watch: {
    cdata: {
      handler(newData) {
        console.log("newDataLeftDown", newData)
        this.options = {
          backgroundColor: "#010d13",
          textStyle: {
            color: "#b3babe"
          },
          tooltip: {
            show:false,
            trigger: 'axis',
            axisPointer: {
              type: "cross",
              axis: "x"
            },
            padding: [10, 10],
            extraCssText: 'box-shadow: 2px 0 3px 0 rgba(163,163,163,0.5)'
          },
          grid: {
            top: "15%",
            left: "10%",
            right: "5%",
          },
          xAxis: {
            type: 'time',
            boundaryGap: false,
            axisLabel: {
              fontSize: 16,
              margin: 20,
              color: '#85d7f9'
            },
            data:['23:00','23:10']
          },
          yAxis: {
            name: "mm",
            nameTextStyle: {
              fontSize: 25,
              color: '#3dcaff'
            },
            nameGap: 30,
            axisLine: true,
            axisLabel: {
              fontSize: 20,
              color: '#3dcaff'
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#123144",
                width: 3
              }

            }
          },
          series: [{
            name: "",
            data: [{
              value: [
                "1997-10-1",
                684
              ]
            },{
              value: [
                "1997-10-2",
                684
              ]
            },
              {

                value: [
                  "1997-10-3",
                  200
                ]
              },
              {

                value: [
                  "1997-10-4",
                  300
                ]
              },
              {
                value: [
                  "1997-10-5",
                  600
                ]
              }],
            type: 'line',
            smooth: true,
            showAllSymbol: true,
            label: {
              show: false,
              position: 'top',
              textStyle: {
                color: '#00ca95',
                fontSize: 10
              }
            },
            itemStyle: {
              normal: {
                color: '#3A84FF',
                lineStyle: {
                  color: "#3A84FF",
                  width: 1
                },
                areaStyle: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 1,
                    x2: 0,
                    y2: 0,
                    colorStops: [{
                      offset: 0,
                      color: 'rgba(0, 0, 0, 0)' // 0% 处的颜色
                    }, {
                      offset: 1,
                      color: '#21da94' // 100% 处的颜色
                    }]
                  }
                }
              }
            }
          }
          ]
        }
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {}
}
</script>
